<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<html>
<head>
    <title>我的好友</title>
    <%@ include file="static_res.jsp"%>
    <script>
        $(function () {
            var curId = ${sessionScope.user.id};

            $("#m5").addClass("active");

            var cared = ${careList};
            var fansd = ${fansList};

            $.each( cared, function(index, content){
                $('#takeCare'+content).html("已关注");
            });
            $.each( fansd, function(index, content){
                $('#takeCare'+content).html("关注");
            });

            $("a[id^='takeCare']").click(function () {
                var str = ($(this).attr('id'));
                num = parseInt(str.replace(/[^0-9]/ig,""))
                if ($(this).text() == "关注")
                {
                    var param = "curId=" +curId + "&careId="+num;
                    console.log(param);
                    $.ajax({
                        type : "POST",
                        url : "<%=path%>/user/takeCare",
                        data : param,
                        dateType : "text",
                        success : function(result) {
                            if ("1" == result)
                            {
                                Materialize.toast('已关注 ！', 3000);
                                history.go(0);
                            }

                            else
                                Materialize.toast('未知错误 ！', 3000);
                        }
                    });
                }
                else
                {
                    if(confirm('确定要取消关注吗?'))
                    {
                        var param = "curId=" +curId + "&careId="+num;
                        $.ajax({
                            type : "POST",
                            url : "<%=path%>/user/closeCare",
                            data : param,
                            dateType : "text",
                            success : function(result) {
                                if ("1" == result)
                                {
                                    Materialize.toast('已取关 ！', 3000);
                                    history.go(0);
                                }

                                else
                                    Materialize.toast('未知错误 ！', 3000);
                            }
                        });
                    }
                    return false;
                }
            });
        });
    </script>
</head>
<body>
<%@ include file="header.jsp"%>
<div class="container">
    <%--3,9布局--%>
    <div class="row">
        <%@include file="userMenu.jsp"%>

        <%--9 start--%>
        <div class="col s9">

            <div class="row"></div>

                <div class = "row bottom0">
                    <div class="row">
                        <div class="col s10 offset-s2">
                            <ul class="tabs">
                                <li class="tab col s5"><a class="active" href="#test1">我关注的</a></li>
                                <li class="tab col s5"><a href="#test2">关注我的</a></li>

                            </ul>
                        </div>
                        <div id="test1" class="col s10 offset-s1">
                            <c:forEach items="${clist}" var="friend">
                                <div class="card hoverable col s4 offset-s1">
                                    <div class="card-stacked">
                                        <div class="card-content">
                                            <div class="card-title center">
                                                <img class="circle" width="60" height="60" src="<%=ipath%>${friend.avatar}">
                                            </div>
                                            <p class="flow-text center">${friend.name}</p>
                                            <p class="truncate center">${friend.intro}</p>
                                            <br>
                                            <p class="truncate center"><a id="takeCare${friend.uid}" class="waves-effect waves-light btn">已关注</a></p>
                                        </div>
                                    </div>
                                </div>
                            </c:forEach>
                        </div>
                        <div id="test2" class="col s10 offset-s1">
                            <c:forEach items="${flist}" var="friend">
                                <div class="card hoverable col s4 offset-s1">
                                    <div class="card-stacked">
                                        <div class="card-content">
                                            <div class="card-title center">
                                                <img class="circle" width="60" height="60" src="<%=ipath%>${friend.avatar}">
                                            </div>
                                            <p class="flow-text center">${friend.name}</p>
                                            <p class="truncate center">${friend.intro}</p>
                                            <br>
                                            <p class="truncate center"><a id="takeCare${friend.uid}" class="waves-effect waves-light btn">已关注</a></p>
                                        </div>
                                    </div>
                                </div>
                            </c:forEach>
                        </div>

                    </div>

                </div>



        </div> <%--9 end--%>
    </div><%--3,9 row end--%>
</div>
</body>
</html>
